<template>
  <div class="node-add-menu">
    <!--     @click="btnStopPropagation($event)"-->
    <a-dropdown
      :trigger="['click']"
      :visible="visible"
      :overlay-style="{ width: '120px' }"
    >
      <!--触发图标 -->
      <a-icon-font
        type="iconzengjia"
        style="color: #5964e4; font-size: 16px;"
      />
      <!-- <div>
        <svg class="node-add-btn" :style="{ height: btnSize, width: btnSize }">
          <path
            :d="nodeAddBtnPath"
            class="add-btn"
            marker-end="url(#arrowhead)"
            :style="{ stroke: '#5964e4', fill: 'transparent' }"
          />
        </svg>
      </div> -->

      <a-menu slot="overlay">
        <a-sub-menu
          v-for="(menu, index) in menus"
          :key="'menu' + index"
          :title="menu.name"
        >
          <a-sub-menu
            v-for="(operator, subIndex) in menu.items"
            v-show="operator.isFolder"
            :key="'folder' + subIndex"
            :title="operator.name"
          >
            <a-menu-item
              v-for="(model, deepIndex) in operator.modelInFolder"
              :key="'model' + deepIndex"
              @click="titleClick(model)"
              >{{ model.name }}
            </a-menu-item>
          </a-sub-menu>
          <a-menu-item
            v-for="(operator, subIndex) in menu.items"
            v-show="!operator.isFolder"
            :key="'sub' + subIndex"
            @click="titleClick(operator)"
            >{{ operator.name }}
          </a-menu-item>
        </a-sub-menu>
        <!-- <a-menu-divider />-->
      </a-menu>
    </a-dropdown>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import DataViewStore from '@/store/modules/dataview'

@Component({
  components: {},
})
export default class AddMenu extends Vue {
  // 当前节点 id
  @Prop({ type: Number, default: 0 }) nodeId!: number
  // 当前是否有右键菜单展开节点
  @Prop({ type: Boolean, default: false }) visible!: boolean
  // 当前节点位置
  @Prop({
    type: Object,
    default: () => {
      return {}
    },
  })
  nodePosition!: object

  private btnSize: number = 16

  public get menus() {
    return DataViewStore.projectOperator
  }

  /**
   * 添加算子
   * @param operator
   */
  titleClick(operator: any) {
    this.$emit('add-node', {
      nodeId: this.nodeId,
      nodePosition: this.nodePosition,
      operator,
    })
  }

  /**
   * 阻止冒泡
   * @param $event
   */
  public btnStopPropagation($event: MouseEvent) {
    $event.stopPropagation()
  }

  public get nodeAddBtnPath() {
    return `
      M ${this.btnSize / 2}, ${this.btnSize / 2}
      m -7, 0
      a 7,7 0 1,0 14,0
      a 7,7 0 1,0 -14,0
      M${this.btnSize / 2},${this.btnSize / 2 - 4}
      L${this.btnSize / 2},${this.btnSize / 2 + 4}
      M${this.btnSize / 2 - 4},${this.btnSize / 2}
      L${this.btnSize / 2 + 4},${this.btnSize / 2}
    `
  }
}
</script>

<style scoped lang="less">
.node-add-menu {
  height: 16px;
  line-height: 16px;
  width: 16px;

  /*.node-add-btn {*/

  /*}*/
}
</style>
